<template>
  <div>
    <el-form>
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <!------------  投诉表  -------------->
        <el-tab-pane label="我的投诉"
                     name="first">
          <el-form>
            <el-form-item>
              <el-button type="primary"
                         @click="dialog.addComplaintDialogFormVisible = true">请输入投诉信息</el-button>
            </el-form-item>
            <el-table :data="complaintList"
                      style="width: 100%">
              <el-table-column prop="complaintId"
                               label="投诉编号"
                               width="140">
              </el-table-column>
              <el-table-column prop="complaintMessage"
                               label="投诉信息"
                               width="140">
              </el-table-column>
              <el-table-column prop="evaluate_level_id"
                               label="评价等级id"
                               width="140">
              </el-table-column>
              <!-- <el-table-column prop="userId"
                           label="用户id"
                           width="150">
          </el-table-column> -->
          <el-table-column prop="staffId"
                           label="员工id"
                           width="140">
          </el-table-column>
          <!-- <el-table-column label="投诉上传图片">
            <el-table-column prop="complaintImage1"
                             label="上传图片1"
                             width="140">
            </el-table-column>
            <el-table-column prop="complaintImage2"
                             label="上传图片2"
                             width="140">
            </el-table-column>
            <el-table-column prop="complaintImage3"
                             label="上传图片3"
                             width="140">
            </el-table-column>
            <el-table-column prop="complaintImage4"
                             label="上传图片4"
                             width="140">
            </el-table-column> -->
          <el-table-column prop="complaintDesc"
                             label="备注信息"
                             width="140">
            </el-table-column>
        </el-table>
        </el-form>
      </el-tab-pane>
<!------------  添加投诉  ------------>
<el-dialog title="投诉" :visible.sync="dialog.addComplaintDialogFormVisible" width="50%">
  <el-form :model="addComplaintForm">
    <el-form-item label="投诉信息" prop="complaintMessage">
      <el-input v-model="addComplaintForm.complaintMessage"></el-input>
    </el-form-item> 
    <el-form-item label="评价等级id" prop="evaluate_level_id">
      <el-input v-model="addComplaintForm.evaluate_level_id"></el-input>
    </el-form-item> 
    <el-form-item label="用户id" prop="userId" hidden>
      <el-input v-model="addComplaintForm.userId" clearable></el-input>
    </el-form-item> 
    <el-form-item label="员工id" prop="staffId">
      <el-input v-model="addComplaintForm.staffId"></el-input>
    </el-form-item> 
    <!-- <el-form-item label="投诉上传图片1" prop="complaintImage1">
      <el-upload v-model="addComplaintForm.complaintImage1"></el-upload>
    </el-form-item> 
    <el-form-item label="投诉上传图片2" prop="complaintImage2">
      <el-upload v-model="addComplaintForm.complaintImage2"></el-upload>
    </el-form-item> 
    <el-form-item label="投诉上传图片3" prop="complaintImage3">
      <el-upload v-model="addComplaintForm.complaintImage3"></el-upload>
    </el-form-item> 
    <el-form-item label="投诉上传图片4" prop="complaintImage4">
      <el-upload v-model="addComplaintForm.complaintImage4"></el-upload>
    </el-form-item> -->
    <el-form-item label="备注" prop="complaintDesc">
      <el-input v-model="addComplaintForm.complaintDesc"></el-input>
    </el-form-item> 
  </el-form>
  <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.addComplaintDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addComplaint">确 定</el-button>
        </div>
</el-dialog>

<!------------  客服服务评价表  ------------>
      <el-tab-pane label="客服评价" name="second">
      <el-form>
      <el-form-item>
         <el-button type="primary" @click="dialog.addDialogFormVisible = true">请输入评价信息</el-button>
      </el-form-item>
        <el-table :data="customerServiceEvaluationList"
                  style="width: 100%">
          <el-table-column prop="customerServiceEvaluationId"
                           label="评价编号"
                           width="200">
          </el-table-column>
          <el-table-column prop="customerServiceEvaluationMessage"
                           label="评价满意度"
                           width="200">
          </el-table-column>
          <el-table-column prop="evaluateLevelId"
                           label="评价等级ID"
                           width="200">
          </el-table-column>
          <el-table-column prop="serviceStaffId"
                           label="客服ID"
                           width="200">
          </el-table-column>
          <!-- <el-table-column prop="userId"
                           label="用户ID"
                           width="200">
          </el-table-column> -->
              <el-table-column prop="customerServiceEvaluationDesc"
                               label="备注"
                               width="200">
              </el-table-column>
            </el-table>
          </el-form>

          <!---------- 添加客服评价信息 ------------>
          <el-dialog title="客服评价表"
                     :visible.sync="dialog.addDialogFormVisible"
                     width="50%">
            <el-form :model="addEvaluationForm">
              <el-form-item label="评价满意度"
                            prop="customerServiceEvaluationMessage">
                <el-select v-model="addEvaluationForm.customerServiceEvaluationMessage"
                           placeholder="请评价">
                  <el-option label="非常满意"
                             value="非常满意"></el-option>
                  <el-option label="满意"
                             value="满意"></el-option>
                  <el-option label="一般"
                             value="一般"></el-option>
                  <el-option label="不满"
                             value="不满意"></el-option>
                  <el-option label="非常不满"
                             value="非常不满"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="评价等级ID"
                            prop="evaluateLevelId">
                <el-input v-model="addEvaluationForm.evaluateLevelId"></el-input>
              </el-form-item>
              <el-form-item label="客服ID"
                            prop="serviceStaffId">
                <el-input v-model="addEvaluationForm.serviceStaffId"></el-input>
              </el-form-item>
              <el-form-item label="用户ID"
                            prop="userId"
                            hidden>
                <el-input v-model="this.userId"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="备注"
                            prop="customerServiceEvaluationDesc">
                <el-input v-model="addEvaluationForm.customerServiceEvaluationDesc"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
              <el-button @click="dialog.addDialogFormVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click="addEvaluation">确 定</el-button>
            </div>

          </el-dialog>

          <!------------  退款  ------------>
        </el-tab-pane>
        <el-tab-pane label="退款服务"
                     name="third">

          <el-form>
            <el-form-item>
              <el-col>
                <el-upload class="clearfix"
                           action="http://localhost:8888/refundControllers/importExcel"
                           name="file"
                           :on-progress="onExcelProgress"
                           :on-success="handleExcelSuccess"
                           accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                           multiple
                           :limit="1"
                           :headers="upload.headerObj">
                  <el-button type="primary">数据导入</el-button>
                </el-upload>
              </el-col>
            </el-form-item>
            <el-form-item>

              <el-table :data="refundList"
                        style="width: 100%">
                <el-table-column prop="refundId"
                                 label="退款编号"
                                 width="180">
                </el-table-column>
                <el-table-column prop="refundMoney"
                                 label="退款金额"
                                 width="180">
                </el-table-column>
                <el-table-column prop="refundState"
                                 label="退款状态"
                                 width="180">
                </el-table-column>
                <el-table-column prop="refundCreateTime"
                                 label="退款申请时间"
                                 width="180">
                </el-table-column>
                <el-table-column prop="refundDesc"
                                 label="退款备注"
                                 width="180">
                </el-table-column>
                <el-table-column label="操作"
                                 width="180">
                  <template slot-scope="scope">

                    <el-button size="mini"
                               @click="submit(scope.row.refundId)">提交审核</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-form-item>
          </el-form>

        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
          <script>
export default {
  data () {
    return {
      customerServiceEvaluationList: [],
      complaintList: [],
      addEvaluationForm: {},
      addComplaintForm: {},
      dialog: {
        addComplaintDialogFormVisible: false,
        addDialogFormVisible: false
      },
      activeName: 'first',
      upload: {
        headerObj: {
          //Spring security时需要传递token，否则不需要该配置
          // Authorization: sessionStorage.getItem("authorization"),
        },
      },
      refundList: []
    };
  },
  methods: {
    submit (refundId) {
      this.$axios.get("res/" + refundId).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");

          this.loadUsers(); //刷新
        }
      });
    },
    exportExcel () {
      this.$axios
        .post("refundControllers/exportExcel", this.form, { responseType: 'blob' })
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadRefunds () {
      this.$axios.get("refundControllers").then((res) => {
        this.refundList = res.data.data.refundList;
      });
    },
    //文件上传成功的钩子函数
    handleExcelSuccess (res, result) {
      this.$message.success("导入成功");
      if (result.response.success) {
        this.loadRefunds();
      }
    },
    // 上传中
    onExcelProgress () {

    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    showComplaint () {
      this.$axios.get("complaint/" + this.userId)
        .then(res => {
          this.complaintList = res.data.data.complaintList;
        })
    },
    showEvaluation () {
      this.$axios.get("serviceEvaluation/" + this.userId)
        .then(res => {
          this.customerServiceEvaluationList = res.data.data.customerServiceEvaluationList;
        })
    },
    addComplaint () {
      this.addComplaintForm.userId = this.userId;
      this.$axios.post("complaint", this.addComplaintForm)
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.dialog.addComplaintDialogFormVisible = false;

            this.showComplaint();
          }
        })
    },
    addEvaluation () {
      this.addEvaluationForm.userId = this.userId;
      this.$axios.post("serviceEvaluation/", this.addEvaluationForm)
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.dialog.addDialogFormVisible = false;
            this.activeName = "second";
            this.showEvaluation();
          }
        })
    }
  },
  created () {
    this.userId = JSON.parse(sessionStorage.getItem("userId"));
    this.showComplaint();
    this.showEvaluation();
    this.loadRefunds();
  }
};
</script>
